<script lang="ts" setup>
import { CloseBtn } from '~/components/card';
import { PersonalNoticeLoading } from './Personal.vue';
import { PlatformNoticeLoading } from './Platform.vue';

const emits = defineEmits<{
  close: [];
}>();

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const tab = ref(0);

const mode = computed(() => {
  return [
    { name: $t('hQnc7fKcKl58vTr2PIqau'), key: 0, num: userInfo.value?.user_notice?.platform_count },
    { name: $t('rpKjlP8hAyvIcqpIbGuLl'), key: 1, num: userInfo.value?.user_notice?.personal_count },
  ];
});

const PlatformSuspense = defineSuspense(() => import('./Platform.vue'), {
  loadingComponent: PlatformNoticeLoading,
});
const PersonalSuspense = defineSuspense(() => import('./Personal.vue'), {
  loadingComponent: PersonalNoticeLoading,
});
</script>

<template>
  <div class="flex flex-col">
    <div class="mb-3 flex-between">
      <div class="text-base font-600">
        {{ $t('iQw2VtV52yfodKrz1Uikk') }}
      </div>
      <CloseBtn @click="emits('close')" />
    </div>
    <div class="grid grid-cols-2 mb-3 gap-2">
      <div
        v-for="(i, k) in mode"
        :key="k"
        class="h-12 flex-between cursor-pointer rounded-2 bg-sys-layer-a px-3 text-3.5 text-sys-text-body leading-12"
        :class="{ 'text-sys-text-head bg-gradient-to-r from-brand-500': tab === i.key }"
        @click="tab = i.key"
      >
        {{ i.name }}
        <span v-if="i.num" class="h-5.5 w-5.5 flex items-center justify-center rounded-[50%] bg-green500 text-2.5 text-sys-text-head">
          {{ Number(i.num) > 100 ? '99+' : i.num }}
        </span>
      </div>
    </div>

    <div class="h-full flex flex-1 flex-col overflow-auto overscroll-contain pr-2 -mr-2">
      <KeepAlive>
        <PlatformSuspense v-if="tab === 0" @confirm="emits('close');" />
      </KeepAlive>
      <KeepAlive>
        <PersonalSuspense v-if="tab === 1" @confirm="emits('close');" />
      </KeepAlive>
    </div>
  </div>
</template>
